<template>
  <div class="login" :style="{backgroundImage: 'url(' + backgroundImg + ')', height: windowHeight + 'px'}">
    <span class="left-tip">【 仅供内部员工使用 】</span>
    <span class="right-tip" @click="updateType">【 切换到{{type ? '超级管理员' : '普通用户'}}登录 】</span>

    <img class="title-img" :src="titleSVG" alt="">
    <div class="tip">[ 工业4.0 - 窗管家品牌管理平台版 - {{type ? '普通用户' : '超级管理员'}}登录 ]</div>

    <!-- - {{type ? '普通用户' : '超级管理员'}}登录 -->

    <el-form class="login-form" ref="loginForm" :model="user" :rules="rules">

      <el-form-item prop="login">
        <el-input v-model="user.login" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="submit-btn" type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>

      <a href="" class="forget-password">忘记密码</a>
    </el-form>


    <div class="bottom-tip" >
      © 2016 - All Right with 5mutian   沪ICP证16051307号
    </div>
  </div>
</template>

<script>
import '../../styles/auth/login.scss'
import imgUrl from '../../assets/login/login.png'
import svgUrl from '../../assets/login/CGJCMS.svg'
import {mapActions, mapGetters} from 'vuex'

export default {
  data: () => ({
    backgroundImg: imgUrl,
    titleSVG: svgUrl,
    windowHeight: 0,
    // type: true, // 普通用户登录
    user: {
      login: '',
      password: ''
    },
    rules: {
      login: [
        { required: true, message: '请输入正确的用户名称！', trigger: 'blur' }
      ],
      password: [
        { min: 6, message: '请输入至少6位的用户密码！', trigger: 'blur' },
        { required: true, message: '请输入正确的用户密码！', trigger: 'blur' }
      ]
    }
  }),
  created() {
    this.windowHeight = window.innerHeight
  },
  computed: {
    ...mapGetters([
      'type'
    ]),

    loginUrl: function() {
      return type ? '' : ''
    }
  },
  methods: {
    ...mapActions([
      'userLogin',
      'updateType'
    ]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.userLogin({type: this.type, user: this.user}).then(res => {
            if (res) {
              this.$router.push('/')
            } else {
              this.$message.error('用户名密码错误，请重试！');
            }
          })
        }
      })
    },
  }
}
</script>
